<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>表单提交</title>
</head>
<body>
  <form>
    <label>用户名：<input class="name" name="name" type="text" /></label>
    <label>密码：<input name="password" type="password" /></label>
    <label>确认密码：<input name="rpassword" type="password" /></label>
    <label>验证码：<input name="code" type="text" /></label>
    <div class="err" style="display: none"></div>
    <button type="submit" class="submit-btn">提交</button>
    
  </form>
  
  <style>label {display: block; padding: 0 0 20px}</style>
  <script>
  var names = ['imooc', 'imooc1', 'imooc2', 'imooc3'], errDom = document.querySelector('.err')
    
  document.querySelector('form').addEventListener('submit', check)
  
  function check (e) {
    e.preventDefault()
    if (names.indexOf(document.querySelector('.name').value) > -1) {
      location.hash = 'hit'
      location.reload()
    } else {
      errDom.style.display = 'block'
      errDom.innerHTML = '恭喜您，注册成功，正在为您跳转'
    }
    
  }
  showErr()
  function showErr () {
    if (location.hash === '#hit') {
      errDom.style.display = 'block'
      errDom.innerHTML = '用户名已被占用'
    }
  }
  
  </script>
</body>
</html>
  